<template>
    <view class="viewport">
      <!-- 地址信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">姓名</text>
          <input
            v-model="form.receiver"
            placeholder-style="color: #888"
            placeholder="请填写收货人姓名"
          />
        </view>
        <view class="form-item">
          <text class="label">手机号码</text>
          <input
            v-model="form.contact"
            placeholder-style="color: #888"
            placeholder="请填写收货人手机号码"
          />
        </view>
        <view class="form-item">
          <text class="label">省/市/县 (区)</text>
          <picker @change="regionChange" mode="region">
            <view v-if="form.fullLocation" class="region">
              {{ form.fullLocation }}
            </view>
            <view v-else class="placeholder"> 请填写收货人所在城市 </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input
            v-model="form.address"
            placeholder-style="color: #888"
            placeholder="街道、楼牌号信息"
          />
        </view>
        <view class="form-item">
          <text class="label">设置默认地址</text>
          <switch
            @change="isDefaultChange"
            :checked="form.isDefault === 1"
            color="#27ba9b"
          />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm">
       保 存
      </view>
    </view>
  </template>
<script>
// 引入接口
import {postmemberaddress,getmemberaddressdetail,putmemberaddress} from '@/api/address'
export default {
  onLoad({id}) {
    //如果有id的话表示当前是编辑页面,修改导航栏标题 
if(id){
uni.setNavigationBarTitle({title:'编辑地址'})
// 发送请求获取数据详情
this.getmemberaddressdetail(id)
// 如果没有id则为填写地址页面
}else{
  uni.setNavigationBarTitle({title:'填写地址'})
}
  },
    data() {
    return {
      form: {
        /**
         * 详细地址
         */
        address: "",
        /**
         * 地址标签,以英文逗号分割
         */
        addressTags: "",
        /**
         * 所在城市编码
         */
        cityCode: "",
        /**
         * 联系方式
         */
        contact: "",
        /**
         * 所在区/县编码
         */
        countyCode: "",
        /**
         * 是否为默认，1为是，0为否
         */
        isDefault: 0,
        /**
         * 邮政编码
         */
        postalCode: "",
        /**
         * 所在省份编码
         */
        provinceCode: "",
        /**
         * 收货人姓名
         */
        receiver: "",
        // 页面显示文字省市区
        fullLocation: "",
      }
    };
  },
  methods:{
    // 获取地址详情进行数据回填
   async getmemberaddressdetail(id){
   const res =  await getmemberaddressdetail(id)
  //  将数据赋值给当前页面的数据对象中
  this.form=res.result
 
    },
    // 省市区选择事件
    regionChange(e){
        console.log(e);
        // 获取省市区的编码
        this.form.postalCode=e.detail.postcode
        // 省市区
        this.form.provinceCode=e.detail.code[0]
        this.form.cityCode=e.detail.code[1]
        this.form.countyCode=e.detail.code[2]
        // 省市区字符串
        this.form.fullLocation=e.detail.value.join('')
    },
    // 设置默认地址开关
    // value接收一个true/false
    // 对应1或2,1为开启2为关闭
    isDefaultChange(e){
        // 如果当前开关的value为true就给isDefault赋值为1,页面开关开启
        this.form.isDefault=e.detail.value?1:0
    },
    // 提交
   async submitForm(){
 // 获取参数
 const params =  {...this.form}
//  删除不需要的数据
 delete params.fullLocation
 delete params.addressTags
    // 如果有id则调用更新地址接口
    if(this.form.id){
      // 根据接口文档参数,删除当前接口数据对象中的id
      delete params.id
      await putmemberaddress(this.form.id,params)
     uni.showToast({title: '更新地址成功'})
    }else{
          // 发送请求
   await postmemberaddress(params) 

// 提示
 uni.showToast({title:'新增地址成功'})

    }

//  跳转
    setTimeout(() => {
        uni.navigateBack()
    }, 1000);


    }
  }
};
</script>


<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>